<template>
  <div class="container">
    <van-tabs
      v-model="active"
      sticky
      title-active-colo="#3ACE8A"
      @change="tabsChange"
      title-inactive-color="#003333"
      color="#3ACE8A"
    >
      <van-tab title="待支付"></van-tab>
      <van-tab title="审核中"></van-tab>
      <van-tab title="已支付"></van-tab>
    </van-tabs>
    <div class="content">
      <van-pull-refresh
        class="conPull"
        v-model="isLoading"
        @refresh="onRefresh"
      >
        <van-list
          v-model="loading"
          offset="100"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell
            class="conList"
            data-v-36a08f62
            v-for="(item, index) in list"
            :key="index"
            @click="navDetails(item)"
          >
            <img class="image" :src="item.goods.list_img" alt="" />
            <div class="textCon">
              <div class="name">{{ item.goods.name }}</div>
              <div class="nanumberme">订单编号：{{ item.out_trade_no }}</div>
              <div class="mouny">￥{{ item.price }}</div>
            </div>
            <van-button
              type="default"
              v-if="type == 0"
              round
              class="button"
              @click.stop="navDetails(item)"
              >去支付</van-button
            >
            <!-- <img
              class="icon"
              src="../../assets/icon7.png"
              alt=""
              v-show="type != 2"
              @click.stop="removeFn(item)"
            /> -->
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { getOrderList, imgUrl, delOrder } from "../../api/api";
export default {
  name: "snapUp",
  data() {
    return {
      active: 0,
      type: 0,
      list: [],
      isLoading: false,
      loading: false,
      finished: false,
      page: 1,
      pagesize: 5,
      total: null,
    };
  },
  methods: {
    tabsChange(e) {
      this.type = e;
      this.finished = false;
      this.loading = false;
      this.isLoading = false;
      this.list = [];
      this.page = 1;
      this.total = null;
      console.log(this.type);
      this.getorderListFn();
      // this.getList(this.type);
    },
    getorderListFn() {
      const data = {
        user_id: localStorage.getItem("userId"),
        status: this.type,
        page: this.page,
        pagesize: this.pagesize,
      };
      getOrderList(data).then((res) => {
        this.$toast.clear()
        console.log("订单列表接口---", res.data);
        this.$toast.clear()
        this.total = res.data.total;
        res.data.rows.forEach((item) => {
          item.goods.list_img = imgUrl + item.goods.list_img;
        });
        this.isLoading = false;
        this.list = this.list.concat(res.data.rows);
      });
    },
    onRefresh() {
      this.list = [];
      this.page = 1;
      this.total = null;
      this.finished = false;
      this.loading = false;
      this.isLoading = false;
      this.getorderListFn();
    },
    onLoad() {
      this.loading = true;
      if (this.total == null)
        return setTimeout(() => {
          this.onLoad();
        }, 1000);
      if (this.list.length >= this.total) {
        this.finished = true;
        this.loading = false;
      } else {
        this.page = this.page + 1;
        this.getorderListFn();
        this.loading = false;
      }
    },
    removeFn(item) {
      this.$dialog
        .confirm({
          title: "",
          message: "是否删除该商品？？？",
        })
        .then(() => {
          const data = {
            user_id: localStorage.getItem('userId'),
            order_id: item.id
          }
          delOrder(data).then(res => {
            console.log('删除商品---', res)
          })
          this.onRefresh();
        })
        .catch(() => {
          console.log("不删除商品");
        });
    },
    navDetails(item) {
      item = {
        order_num: item.out_trade_no,
        order_id: item.id
      }
      console.log(JSON.stringify(item))
      this.$router.push({
        path: `/commodity`,
        query: {
          item: JSON.stringify(item),
        },
      });
    },
  },
  mounted() {
    this.getorderListFn();
  },
};
</script>

<style lang="less" scoped>
.container {
  .content {
    width: 100%;
    background-color: #f1f1f1;
    min-height: calc(100vh - 44px);

    .conPull {
      min-height: calc(100vh - 44px);
    }

    .conList {
      width: 94%;
      height: 120px;
      margin-left: 3%;
      margin-top: 10px;

      .van-cell__value {
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-sizing: border-box;

        .image {
          width: 100px;
          height: 100px;
        }

        .textCon {
          width: calc(100% - 100px);
          height: 100px;
          padding-left: 13px;
          box-sizing: border-box;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;

          .name {
            margin-top: 13px;
            width: 100%;
            font-size: 1.2em;
            color: #333333;
            overflow: hidden; /*超出部分隐藏*/
            white-space: nowrap; /*不换行*/
            text-overflow: ellipsis; /*超出部分文字以...显示*/
          }

          .nanumberme {
            font-size: 0.5em;
            margin-top: -15px;
            color: #999999;
          }

          .mouny {
            font-size: 1.5em;
            color: #dd0000;
          }
        }
        .button {
          height: 30px;
          color: #999999;
          font-size: 0.8em;
          border: 1px solid #999999;
          position: absolute;
          bottom: 0px;
          right: 5px;
        }

        .icon {
          width: 10px;
          height: 10px;
          position: absolute;
          top: 0;
          right: 0px;
        }
      }
    }
  }
}
</style>